<template>
	<view class='posi_rela'>
		<image mode="widthFix" src="../../static/bg_share2.png" class="bg_share"></image>
		<view class="posi_rela">
			<view class="headTxt">
				<view>某某教育</view>
				<view>入门第<text>1</text>课</view>
			</view>

			<image src="../../static/img.png" class="flyImg"></image>

			<view class="txtBox">
				<image src="../../static/img02.png" class="txtTitle"></image>
				<view class="text_center mt_30 color_purple fs_28">
					<view v-for="(item, index) in list" :key="index">{{item}}</view>
				</view>

				<view class="scan">
					<view class="scanTxt">
						<view>{{title}}</view>
						<view class="fs_26">专属邀请码：{{code}}</view>
						<view class="fs_18">识别二维码，免费领取</view>
					</view>
					<view>
						<image :src="erweima"></image>
					</view>
				</view>
			</view>
		</view>


		<navigator class="inviteList">邀请记录</navigator>
		<navigator class="inviteBtn">一键邀请</navigator>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: ["教育的难题与困惑","教育的难题与困惑","教育的难题与困惑","教育的难题与困惑"],
				title: '某某教育',
				code: 'LUY001KJH',
				erweima: '../../static/erweima.png'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.bg_share {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.headTxt {
		padding: 50rpx;
		text-align: center;
		color: #fff;
		font-size: 80rpx;
	}

	.headTxt text {
		color: #ffc63d;
	}

	.flyImg {
		width: 412rpx;
		height: 258rpx;
		display: block;
		margin: 0 auto;
		position: relative;
	}

	.txtBox {
		margin: 140rpx 120rpx 0;
		height: 500rpx;
		position: relative;
	}

	.txtTitle {
		width: 240rpx;
		height: 40rpx;
		display: block;
		margin: 0 auto;
	}

	.color_purple {
		color: #192256;
	}

	.scan {
		position: absolute;
		bottom: 30rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		background-color: #346DFF;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.scanTxt {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.scanTxt view {
		color: #fff;
	}

	.scanTxt view:first-child {
		font-size: 20rpx;
		color: #9AB6FF;
	}

	.scan image {
		width: 112rpx;
		height: 112rpx;
		display: block;
	}

	/* 邀请记录 */
	.inviteList {
		position: fixed;
		top: 50rpx;
		right: 0;
		background-color: #fff;
		font-size: 24rpx;
		padding: 5rpx 10rpx 5rpx 20rpx;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.inviteBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFB43D;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
